<template>
	<view class="main">
		<navBar :customBack="back" title="授权登录"></navBar>
		<image class="logo" src="https://shop.outletds.com/img/coolux-011.png" mode="aspectFit"></image>
		<text class="title">城市迷你奥特莱斯</text>
		<view class="subtitle">请完善微信授权以继续使用</view>
		<button class="get-info" v-if="!phoneShow" @click="getUserInfo">微信授权用户信息</button>
		<button class="get-info" v-else open-type="getPhoneNumber" @getphonenumber="phoneNumber">微信授权手机号</button>
		<!-- 获取用户手机号 -->
		<!-- <u-popup v-model="phoneShow" mode="bottom" height="200" class="mine-phone">
			<view class="tips">同意平台获取手机号已获得更好的体验</view>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="phoneNumber">
				确定
			</button>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		login,
		userInfo,
		shareLevel,
		phone,
		showBalanceApi
	} from "@/utils/api";
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loginCode: "",
				phoneShow: false,
				isDone: false
			}
		},
		onLoad() {
			uni.login({
				success: (res) => {
					this.loginCode = res.code
				}
			})
		},
		methods: {
			...mapActions([
				'setUserInfo'
			]),
			back() {
				if (this.isDone) {
					this.$Router.back(1)
				} else {
					this.$Router.back(2)
				}
			},
			// 获取用户手机号
			phoneNumber(e) {
				console.log("获取用户手机号", e);
				if (e.detail.encryptedData) {
					const {
						encryptedData,
						iv
					} = e.detail;
					uni.login({
						success: (res) => {
							const {
								code
							} = res;
							phone({
								iv: encodeURI(iv),
								encryptedData: encodeURI(encryptedData),
								code: encodeURI(code),
							}).then((resp) => {
								console.log("手机号", resp);
								if (resp.code == 200) {
									this.phoneShow = false;
									if(this.userInfo.name === '微信用户'){
										this.$utils.toast('请先完善个人信息')
										setTimeout(()=>{
											this.$Router.replace('/pages/common/editInfo/editInfo')
										}, 1000)
									}else{
										this.$Router.back(1)	
									}
								}
							});
						},
					});
				}
			},
			getUserInfo() {
				var that = this;
				uni.getUserProfile({
					desc: "登录后以提供更好的服务",
					success: (res) => {
						let userInfo = res.userInfo
						uni.login({
							success: (loginRes) => {
								let code = loginRes.code
								login({
									iv: res.iv,
									encryptedData: encodeURI(res.encryptedData),
									code: this.loginCode,
									nickName: userInfo.nickName,
									avatarUrl: userInfo.avatarUrl
								}).then((resp) => {
									console.log("登录121", resp);
									if (resp.code == 200) {
										console.log("登录", resp);
										const {
											token
										} = resp.data;
										console.log("token", token);
										uni.setStorageSync("token", token);
										this.phoneShow = true;
										this.isDone = true
										that.setUserInfo().then(() => {
											this.shareId &&
												shareLevel({
													id: this.shareId,
												}).then((resp) => {
													console.log("用户上下级绑定",
														resp);
												});
										});
									}
								});
							}
						})
					},
					fail: (err) => {
						console.log(err);
					},
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.main {
		@extend .flex-center;
		flex-direction: column;
		padding: 0 45rpx;
		padding-top: 183rpx;
		color: #666666;
	}

	.title {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 210rpx;
	}

	.get-info {
		border: none;
		background-color: #CB712B;
		color: #FFF;
		width: 100%;
		padding: 29rpx;
		margin-top: 29rpx;
		font-size: 30rpx;
	}

	.mine-phone {
		.tips {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			padding: 20rpx 0;
		}

		.btn {
			width: 80%;
			margin: 0 auto;
			padding: 0 !important;
			line-height: 70rpx;
			font-size: 34rpx;
			background: #333;
			color: #fff;
			letter-spacing: 10rpx;
		}
	}

	.logo {
		width: 200rpx;
		height: 86rpx;
		margin-bottom: 46rpx;
	}
</style>
